<template>
  <lay-carousel v-model="active1">
    <lay-carousel-item id="1">
      <div style="background-image: url(@/assets/carousel1.png);background-repeat: no-repeat;background-position: center">条目一</div>
    </lay-carousel-item>
    <lay-carousel-item id="2">
      <img src="../../assets/carousel1.png" alt="">
<!--      <div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#5FB878;">条目二</div>-->
    </lay-carousel-item>
    <lay-carousel-item id="3">
      <div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#FFB800;">条目三</div>
    </lay-carousel-item>
    <lay-carousel-item id="4">
      <div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#FF5722;">条目四</div>
    </lay-carousel-item>
  </lay-carousel>
</template>

<script lang="ts">
import { ref } from 'vue'

export default {
  setup() {
    const active1 = ref("1")
    const selectedKey = ref("5")
    const openKeys1 = ref(["7"])
    return {
      active1,
      selectedKey,
      openKeys1
    }
  }
}
</script>


<style scoped>

</style>